<template>
  <main>
    <div class="container-fluid">
      <div
        class="page-header min-height-300"
        style="background-image: url('');
          margin-right: -24px;
          margin-left: -34%;
        "
      >
        <span class="mask bg-gradient-success opacity-6"></span>
      </div>
      
    </div>
    <div class="py-4 container-fluid">
      <div class="row">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header pb-0">
              <div class="d-flex align-items-center">
                <p class="mb-0">Profile</p>
                <!-- <argon-signup-button color="success" size="sm"  @click="toggleSidebar" class="ms-auto"
                  >Setting
                </argon-signup-button> -->
                <argon-signup-button @click="toggleSidebar" color="success" size="sm" class="ms-auto d-xl-none"
                  >Navigation
                </argon-signup-button>
              </div>
            </div>
            <div class="card-body">
              <p class="text-uppercase text-sm">User Information</p>
              <div class="row">
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Username</label>
                  <argon-signup-input type="text" v-model="userData.username" />
                </div>
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Email address</label>
                  <argon-signup-input type="email" v-model="userData.email"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <profile-card />
        </div>
      </div>
      
    </div>
  </main>
</template>

<script>
import setNavPills from "@/assets/js/nav-pills.js";
import setTooltip from "@/assets/js/tooltip.js";
import ProfileCard from "./components/ProfileCard.vue";
import ArgonSignupInput from "@/components/ArgonSignupInput.vue";
import ArgonSignupButton from "@/components/ArgonSignupButton.vue";
import router from "@/router/index.js"
import { mapMutations, mapActions } from "vuex";
const body = document.getElementsByTagName("body")[0];

export default {
  name: "profile",
  data() {
    return {
      showMenu: false,
      userData:{
        email:'',
        username:''
      },
    };
  },
  components: { 
    ProfileCard, 
    ArgonSignupInput, 
    ArgonSignupButton,
  },
  methods:{
    ...mapMutations(["navbarMinimize", "toggleConfigurator"]),
    ...mapActions(["toggleSidebarColor"]),

    toggleSidebar() {
      this.toggleSidebarColor("bg-white");
      this.navbarMinimize();
    }
  },
  created(){
    const flag = sessionStorage.getItem("LOGINFLAG")
    if(flag == null){
      router.push('/signin')
    }
  },
  mounted() {
    this.$store.state.isAbsolute = true;
    setNavPills();
    setTooltip();
    this.userData.email = sessionStorage.getItem("email");
    this.userData.username = sessionStorage.getItem("username")
    console.log(this.userData);
  },
  beforeMount() {
    this.$store.state.imageLayout = "profile-overview";
    this.$store.state.showNavbar = false;
    this.$store.state.showFooter = true;
    this.$store.state.hideConfigButton = true;
    body.classList.add("profile-overview");
  },
  beforeUnmount() {
    this.$store.state.isAbsolute = false;
    this.$store.state.imageLayout = "default";
    this.$store.state.showNavbar = true;
    this.$store.state.showFooter = true;
    this.$store.state.hideConfigButton = false;
    body.classList.remove("profile-overview");
  }
};
</script>
